<template>
  <div class="introduction container-fluid">
    <div class="container">
      <button class="btn btn-primary">Welcome!I'M</button>
      <h2 class="aas">Abdullah Al Sharif's</h2>
      <h4 class="investor">investor</h4>

      <p class="lorem">
        Lorem ipsum dolor sit amet,Stet clita kasd gubergren, no sea takimata
        sanctus est is thelorem ipsum dolor sit amet. sed diam nonumy eirmod
        tempor invidunt ut labore et dolore is the magna aliquyam.
      </p>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.introduction {
  position: absolute;
  top: 272px;

  .btn-primary {
    background-color: #3772ff;
    opacity: 0.6;
  }

  .aas {
    font-family: Source Han Serif SC;
    font-weight: 800;
    color: rgb(230, 218, 218);
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .investor {
    font-family: Poppins;
    font-weight: 400;
    // line-height: 35px;
    color: rgb(207, 195, 195);
    margin-bottom: 10px;
  }
  .lorem {
    max-width: 660px;
    font-family: SF Pro Text;
    font-weight: 400;
    line-height: 38px;
    color: rgb(207, 195, 195);
  }
}

@media screen and(max-width: 1000px) {
  .introduction {
    top: 130px;
  }
  .introduction .lorem {
    display: none;
  }
}
</style>
